<template>
  <div class="goodsInfo">
    <div class="baseInfo">
      <div>
        <span class="price-color character">￥</span>
        <span class="price-color price">{{ integer }}</span>
        <span class="price-color decimal">.{{ decimal }}</span>
      </div>
      <van-tag plain type="primary" color="#E50A4E" v-for="(tag,index) in item.tags"
               :key="'tag'+index" class="tags">
        {{ tag }}
      </van-tag>
      <p class="title">{{ item.title }}</p>
      <div class="flex flex-between">
        <div class="underTitle flex flex-center" @click="onRecommendClick">
          <img class="marginAuto0" src="@/assets/img/goodsMore/baseInfo1.png">
          <p>推荐</p>
        </div>
        <div class="underTitle flex flex-center">
          <img class="marginAuto0" src="@/assets/img/goodsMore/baseInfo2.png">
          <p>帮我选</p>
        </div>
        <div class="underTitle flex flex-center" @click="onShareClick">
          <img class="marginAuto0" src="@/assets/img/goodsMore/baseInfo3.png">
          <p>分享</p>
        </div>
      </div>
    </div>
    <div class="detail">
      <div v-for="(detail,index) in item.detail" :key="'detail'+index"
           class="singleDetail flex flex-between" @click="onDetailClick(detail.title)">
        <p class="title text">{{ detail.title }}</p>
        <p class="des text">{{ detail.des }}</p>
        <van-icon class="marginAuto0" name="arrow" size=".4rem" color="#999999"/>
      </div>
    </div>

    <recommend-action-sheet ref="recommendActionSheet"></recommend-action-sheet>
    <share-sheet ref="shareSheet"></share-sheet>
    <guarantee-action-sheet :guarantee="item.guarantee" ref="guaranteeActionSheet"></guarantee-action-sheet>
    <params-action-sheet :params="item.params" ref="paramsActionSheet"></params-action-sheet>
  </div>
</template>

<script>
import Vue from 'vue';
import {Tag} from 'vant';
import {ActionSheet} from 'vant';
import {Divider} from 'vant';
import ShareSheet from "./shareSheet";
import ParamsActionSheet from "./paramsActionSheet";
import RecommendActionSheet from "./recommendActionSheet";
import GuaranteeActionSheet from "./guaranteeActionSheet";

Vue.use(Divider);

Vue.use(ActionSheet);
Vue.use(Tag);
export default {
  name: "goodsInfo",
  components: {GuaranteeActionSheet, RecommendActionSheet, ParamsActionSheet, ShareSheet},
  props: {
    item: {
      type: Object,
    }
  },
  data() {
    return {
    }
  },
  computed: {
    integer() {
      let price = this.item.price;
      return parseInt(price);
    },
    decimal() {
      let price = this.item.price;
      let num = price * 100 - parseInt(price) * 100;
      return num;
    }
  },
  methods: {
    onDetailClick(str) {
      if(str==="参数") this.$refs.paramsActionSheet.show = true;
      if(str==="保障") this.$refs.guaranteeActionSheet.show = true;
      else console.log("aaa")
    },
    onShareClick() {
      this.$refs.shareSheet.showShare = true
    },
    onRecommendClick(){
      this.$refs.recommendActionSheet.show=true;
    }
  },
  created() {
    // console.log(this.item)
  }
}
</script>

<style lang="less" scoped>
.goodsInfo {
  .baseInfo {
    padding: .2rem;
    margin: 0 .2rem;
    border-radius: 0 0 .4rem .4rem;
    background-color: #fff;

    .tags {
      margin-right: .2rem;
    }

    .title {
      font-size: .5rem;
      font-weight: 550;
    }

    .character {
      font-size: .4rem;
    }

    .price {
      font-size: .6rem;
      font-weight: 550;
    }

    .decimal {
      font-size: .4rem;
      font-weight: 550;
    }

    .underTitle {
      width: 30%;
      padding: .2rem 0;
      margin-top: .4rem;

      img {
        width: .4rem;
        height: .4rem;
        margin-right: .1rem;
      }

      p {
        font-size: .4rem;
        color: #969696;
      }
    }
  }

  .detail {
    border-radius: .4rem;
    background-color: #fff;
    margin: .4rem .2rem;
    padding: .2rem 0;

    .singleDetail {
      padding: .2rem .4rem;

      .text {
        font-size: .4rem;
      }

      .title {
        color: #999999;
        margin-right: .6rem;
      }

      .des {
        flex: 1;
      }
    }
  }
}

</style>